<!--
 * @Author: xfworld
 * @Date: 2020-06-10 15:26:04
 * @LastEditors: xfworld
 * @LastEditTime: 2020-06-11 17:10:03
 * @Description:
-->
<template>
  <div class="scanner">
    <van-nav-bar
      title="选择货主仓库品牌"
      left-text="返回"
      @click-left="onClickLeft"
      v-if="this.$route.params.sourceType == 'me'"
    ></van-nav-bar>
    <van-nav-bar title="选择货主仓库品牌" v-if="this.$route.params.sourceType != 'me'"></van-nav-bar>
    <van-row class="store_wrap" type="flex" justify="center">
      <van-col span="24">
        <van-form>
          <van-field
            is-link
            label="货主"
            size="large"
            v-model="formItem.storerName"
            :readonly="storerReadOnly"
            @focus="storerFocusClick"
            @click="storerFocusClick"
          />
          <van-action-sheet v-model="storerShow" :actions="storerActions" :close-on-click-overlay="true" @select="storerSelect" />
          <van-field
            is-link
            label="仓库"
            size="large"
            v-model="formItem.warehouseName"
            :readonly="warehouseReadOnly"
            @focus="warehouseFocusClick"
            @click="warehouseFocusClick"
          />
          <van-action-sheet v-model="warehouseShow" :actions="warehouseActions" :close-on-click-overlay="true" @select="warehouseSelect" />
          <van-field
            is-link
            label="品牌"
            size="large"
            v-model="formItem.brandName"
            :readonly="brandReadOnly"
            @focus="brandFocusClick"
            @click="brandFocusClick"
          />
          <van-action-sheet v-model="brandShow" :actions="brandActions" :close-on-click-overlay="true" @select="brandSelect" />
          <div class="confirm-btn">
            <van-button type="primary" size="small" @click="saveData" :disabled="showBtn" block>确定</van-button>
          </div>
        </van-form>
      </van-col>
    </van-row>
  </div>
</template>
<script>
import {getStorerSelect, getWarehouseSelect, getBrandSelect} from "@/api/common/selectData";
import {mapGetters} from "vuex";

export default {
  name: "selectSWB",
  computed: {
    ...mapGetters("user", ["userData"])
  },
  created() {
    let his = this;
    setTimeout(function() {
      his.getStorerIdList();
    }, 1000);
  },
  data() {
    return {
      showBtn: true,
      storerActions: [],
      warehouseActions: [],
      brandActions: [],
      storerShow: false,
      warehouseShow: false,
      brandShow: false,
      storerReadOnly: false,
      warehouseReadOnly: false,
      brandReadOnly: false,
      formItem: {
        storerId: "",
        storerName: "",
        warehouseId: "",
        warehouseName: "",
        brandId: "",
        brandName: ""
      }
    };
  },
  methods: {
    //页面点击进来时候走此函数给查询出货主下拉框的数据
    getStorerIdList() {
      getStorerSelect(this.userData.userId).then(response => {
        if (response.data.status) {
          let data = {};
          this.storerActions = [];
          for (let i = 0; i < response.data.data.length; i++) {
            data = {
              name: response.data.data[i].grantValue,
              code: response.data.data[i].grantKey
            };
            this.storerActions.push(data);
          }
          this.formItem.storerName = this.storerActions[0].name;
          this.formItem.storerId = this.storerActions[0].code;
          this.getwarehouseIdList(this.formItem.storerId);
        } else {
          this.$notify({type: "warning", message: response.data.message});
        }
      });
    },
    getwarehouseIdList(storerId) {
      getWarehouseSelect(storerId, this.userData.userId).then(response => {
        if (response.data.status) {
          let data = {};
          this.warehouseActions = [];
          for (let i = 0; i < response.data.data.length; i++) {
            data = {
              name: response.data.data[i].grantValue,
              code: response.data.data[i].grantKey
            };
            this.warehouseActions.push(data);
          }
          this.formItem.warehouseName = this.warehouseActions[0].name;
          this.formItem.warehouseId = this.warehouseActions[0].code;
          this.getBrandIdList(this.formItem.storerId, this.formItem.warehouseId);
        } else {
          this.$notify({type: "warning", message: response.data.message});
        }
      });
    },
    getBrandIdList(storerId, warehouseId) {
      getBrandSelect(storerId, warehouseId, this.userData.userId).then(response => {
        if (response.data.status) {
          let data = {};
          this.brandActions = [];
          for (let i = 0; i < response.data.data.length; i++) {
            data = {
              name: response.data.data[i].grantValue,
              code: response.data.data[i].grantKey
            };
            this.brandActions.push(data);
          }
          this.formItem.brandName = this.brandActions[0].name;
          this.formItem.brandId = this.brandActions[0].code;
          //this.storerSelect(this.formItem.storerId, this.formItem.warehouseId, this.formItem.brandId);
          this.showBtn = false;
        } else {
          this.$notify({type: "warning", message: response.data.message});
        }
      });
    },
    //货主下拉框选择方法
    storerSelect(item) {
      this.storerShow = false;
      //Toast(item.name);
      this.formItem.storerName = item.name;
      this.formItem.storerId = item.code;
      this.getwarehouseIdList(this.formItem.storerId);
    },
    //仓库下拉框选择方法
    warehouseSelect(item) {
      this.warehouseShow = false;
      this.formItem.warehouseName = item.name;
      this.formItem.warehouseId = item.code;
      this.getbrandIdList(this.formItem.storerId, this.formItem.warehouseId);
    },
    brandSelect(item) {
      this.brandShow = false;
      this.formItem.brandName = item.name;
      this.formItem.brandId = item.code;
      //this.storerSelect(this.formItem.storerId, this.formItem.warehouseId, this.formItem.brandId);
    },
    onClickLeft() {
      this.$router.push({
        name: "homePerson"
      });
    },
    storerFocusClick() {
      this.storerShow = true;
      this.storerReadOnly = true;
      setTimeout(() => {
        this.storerReadOnly = false;
      }, 200);
    },
    warehouseFocusClick() {
      this.warehouseShow = true;
      this.warehouseReadOnly = true;
      setTimeout(() => {
        this.warehouseReadOnly = false;
      }, 200);
    },
    brandFocusClick() {
      this.brandShow = true;
      this.brandReadOnly = true;
      setTimeout(() => {
        this.brandReadOnly = false;
      }, 200);
    },
    saveData() {
      this.$root.storerWarehouseBrand = this.formItem;
      if (this.$route.params.sourceType == "me") {
        this.$router.push({
          name: "homePerson"
        });
      } else {
        this.$router.push({
          name: "homeIndex"
        });
      }
      this.$notify({type: "warning", message: "选择完成"});
    }
  }
};
</script>

<style lang="less" scoped>
.store_wrap {
  /deep/ .van-cell--large .van-cell__title {
    color: #333;
    font-size: 14px;
  }
  /deep/ .van-field__control {
    text-align: right;
    color: #666;
  }
  /deep/ .van-cell:after {
    left: 0;
  }
}
.confirm-btn {
  text-align: center;
  margin: 16px;
  margin-top: 30px;
  /deep/ .van-button {
    height: 36px;
    font-size: 14px;
  }
}
.msgTxt {
  margin: 8px 83px 0;
  font-size: 18px;
  color: white;
}
</style>
